<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>凤栖梧桐·致卿书</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.1/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&family=ZCOOL+QingKe+HuangYou&display=swap" rel="stylesheet">
    
    <style>
        body {
            background: linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), 
                        url('https://img.zcool.cn/community/01a4845c2a5177a80121ab00095a7e.jpg') center/cover fixed;
            font-family: 'Ma Shan Zheng', cursive;
            color: #f8e9d2;
            min-height: 200vh;
        }

        .love-calligraphy {
            font-family: 'Ma Shan Zheng', cursive;
            text-shadow: 0 0 15px #ff3366;
        }

        .poem-card {
            background: rgba(255, 240, 245, 0.1);
            backdrop-filter: blur(5px);
            border: 1px solid rgba(255,255,255,0.2);
            border-radius: 15px;
            transition: transform 0.5s;
            cursor: pointer;
        }

        .poem-card:hover {
            transform: translateY(-10px);
            background: rgba(255, 182, 193, 0.15);
        }

        .floating-heart {
            position: fixed;
            pointer-events: none;
            animation: float 3s ease-out forwards;
        }

        @keyframes float {
            0% { transform: translateY(0) scale(1); opacity: 1; }
            100% { transform: translateY(-100vh) scale(0); opacity: 0; }
        }

        .moonlight-effect::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at var(--x) var(--y), 
                      rgba(255,255,255,0.2) 0%, 
                      transparent 70%);
            pointer-events: none;
        }

        .fade-in {
            animation: fadeInUp 1s ease;
        }

        @keyframes fadeInUp {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
    </style>
</head>
<body class="moonlight-effect" data-bs-spy="scroll" data-bs-target="#nav">
    <!-- 动态爱心 -->
    <div id="hearts-container"></div>

    <!-- 音乐播放 -->
    <audio id="bgm" loop>
        <source src="https://cdn.jsdelivr.net/gh/your-repo/bgm.mp3" type="audio/mpeg">
    </audio>

    <div class="container-fluid py-5">
        <div class="row justify-content-center">
            <div class="col-md-8 col-lg-6 text-center">
                <h1 class="love-calligraphy display-3 mb-4 fade-in">凤栖梧桐 · 岁在甲辰</h1>
                
                <button class="btn btn-outline-light mb-5" id="playBtn">
                    <i class="bi bi-music-note-beamed"></i> 点此共聆仙音
                </button>

                <!-- 将原有三个poem-card替换为以下六个段落 -->
<div class="poem-card p-4 mb-4 fade-in" data-delay="0.3s">
    <p class="lead">【仙姿】</p>
    <p>其形也，翩若惊鸿，婉若游龙。曜灵昭昭，华采千寻。<br>
    皎若昆山片玉，烨如阆苑琼英。乍观似素月凝霜，转眄若赤霞栖岫。<br>
    远而望之，有姑射冰雪之姿；迫而察之，具湘君兰蕙之质。</p>
</div>

<div class="poem-card p-4 mb-4 fade-in" data-delay="0.4s">
    <p class="lead">【华容】</p>
    <p>云鬓葳蕤，修眉连娟。檀口含朱，瓠犀浮雪。<br>
    转眄则星斗摇落，启唇则宫商自生。<br>
    戴明月珰，缀九华琚。曳六铢鲛绡，踏五云文履。<br>
    动止皆合韶乐，颦笑俱成画图。</p>
</div>

<div class="poem-card p-4 mb-4 fade-in" data-delay="0.5s">
    <p class="lead">【灵踪】</p>
    <p>步蘅薄则芳蔼盈路，拂桂旗则清飔满襟。<br>
    忽焉纵体，邀游八荒。左牵玄鹿，右驾青鸾。<br>
    采钟山琅玕于碧落，撷阆风玄芝于丹渊。</p>
</div>

<div class="poem-card p-4 mb-4 fade-in" data-delay="0.6s">
    <p class="lead">【衷情】</p>
    <p>余怀素悃，托意流波。解双珰以通诚，奉明珠而效慕。<br>
    彼乃振瑶佩，发清商，指洛浦为期，盟白水为誓。<br>
    然恐宓妃解佩，空留汉皋之憾；郑女委珰，徒遗溱洧之悲。</p>
</div>

<div class="poem-card p-4 mb-4 fade-in" data-delay="0.7s">
    <p class="lead">【化境】</p>
    <p>戏清泠之瑶池，拾翠羽于悬圃。<br>
    乍若轻云蔽月，复似流风回雪。<br>
    凌波微步，罗袜生尘；振袂轻飏，天衣垂虹。<br>
    含辞未吐，气馥幽兰；垂睫欲语，光转秋潭。</p>
</div>

<div class="poem-card p-4 mb-4 fade-in" data-delay="0.8s">
    <p class="lead">【慕思】</p>
    <p>怅人天兮永隔，怨良晤兮难期。<br>
    解琼琚以遗思，寄长歌于素鲤。<br>
    望星汉之西流，慕姮娥之孤栖。<br>
    揽辔踟蹰，中心如酲。惟托梦魂兮相接，愿逐月华兮照君。</p>
</div>


                <div class="mt-5 fade-in">
                    <button class="btn btn-danger px-5 py-3 love-calligraphy" 
                            id="loveBtn">
                        三生石上注良缘，愿执子手度流年
                    </button>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.1/js/bootstrap.bundle.min.js"></script>
    <script>
        // 月光跟随鼠标
        document.addEventListener('mousemove', (e) => {
            document.documentElement.style.setProperty('--x', `${e.clientX}px`);
            document.documentElement.style.setProperty('--y', `${e.clientY}px`);
        });

        // 爱心特效
        document.addEventListener('click', (e) => {
            const heart = document.createElement('div');
            heart.className = 'floating-heart';
            heart.style.left = `${e.clientX}px`;
            heart.style.top = `${e.clientY}px`;
            heart.innerHTML = '❤';
            document.getElementById('hearts-container').appendChild(heart);
            
            setTimeout(() => heart.remove(), 3000);
        });

        // 音乐控制
        const bgm = document.getElementById('bgm');
        document.getElementById('playBtn').addEventListener('click', () => {
            bgm.play();
            playBtn.innerHTML = '<i class="bi bi-music-note-beamed"></i> 仙音袅袅 琴瑟和鸣';
        });

        // 延迟加载动画
        document.querySelectorAll('.fade-in').forEach(el => {
            const delay = el.dataset.delay || '0s';
            el.style.animationDelay = delay;
        });

        // 誓约按钮
        document.getElementById('loveBtn').addEventListener('click', () => {
            alert('长相思兮长相忆，短相思兮无穷极。愿我如星卿如月，夜夜流光相皎洁。');
        });
    </script>
</body>
</html>
